<template>
  <div class="course-card" :style="backgroundStyle">
    <img v-if="course.imageUrl" :src="course.imageUrl" alt="Course Image" class="course-image" />
    <div class="course-info">
      <h3>{{ course.name }}</h3>
      <p>{{ course.description }}</p>
    </div>
  </div>
</template>

<script>
// Component representing a card for displaying course information
export default {
  name: 'CourseCard',
  props: {
    course: {
      type: Object,
      required: true
    }
  },
  computed: {
    // Computes the background style based on the course image URL
    backgroundStyle() {
      return {
        backgroundImage: this.course.imageUrl ? `url(${this.course.imageUrl})` : ''
      };
    }
  }
};
</script>

<style scoped>
.course-card {
  width: 300px; /* 设置具体宽度 */
  height: 200px; /* 设置具体高度 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid #ccc;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}

.course-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.course-info {
  padding: 15px;
}
</style>
